<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-date"></i> 部门管理</el-breadcrumb-item>
				<el-breadcrumb-item>部门添加</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-form :model="deptForm" :rules="deptRules" ref="deptForm" label-width="80px">
				<el-form-item label="部门名称" prop="deptName">
					<el-input v-model="deptForm.deptName" type="input"></el-input>
				</el-form-item>
				<el-form-item label="部门简介" prop="content">
					<el-input v-model="deptForm.content" type="input"></el-input>
				</el-form-item>
				<el-form-item label="打卡精度" prop="longitude">
					<el-input placeholder="请输入打卡精度" v-model="deptForm.longitude" type="input"></el-input>
				</el-form-item>
				<el-form-item label="打卡维度" prop="latitude">
					<el-input placeholder="请输入打卡维度" v-model="deptForm.latitude" type="input"></el-input>
				</el-form-item>
				<el-form-item label="打卡半径" prop="radius">
					<el-input placeholder="请输入打卡半径(单位:米)" v-model="deptForm.radius" type="input"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('deptForm')">确认添加</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor
	} from 'vue-quill-editor';
	export default {
		data: function() {
			return {
				deptForm: {
					deptName: '',
					content: '',
					longitude: '',
					latitude: '',
					radius: ''
				},
				deptRules: {
					deptName: [{
						required: true,
						message: '请输入部门名称',
						trigger: 'blur'
					}],
					longitude: [{
						required: true,
						message: '请输入打卡精度',
						trigger: 'blur'
					}],
					latitude: [{
						required: true,
						message: '请输入打卡维度',
						trigger: 'blur'
					}],
					radius: [{
						required: true,
						message: '请输入打卡半径',
						trigger: 'blur'
					}],
				},
				content: '',
				editorOption: {
					placeholder: '开始编辑'
				},

			}
		},
		components: {
			quillEditor
		},
		computed: {

		},
		created() {
			this.init()
		},
		mounted: function() {

		},
		methods: {
			init() {
				this.form.mechanismId = sessionStorage.getItem(this.Global.SESSION_CONFIG.MECHANISM_ID);
			},
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},
			submitForm(formName) {
				let that = this;
				that.deptForm.token = sessionStorage.getItem("token");
				that.deptForm.hospital = JSON.parse(sessionStorage.getItem('userMap')).hospital;
				that.deptForm.type = 1;
				that.$refs[formName].validate((valid) => {
					if (valid) {
						that.HttpUtil.encryptPost(
							that,
							that.Global.URLPATH.DEPT,
							that.deptForm,
							function(data) {
								that.$message.success("添加成功");
								that.$router.push({
									path: '/dept'
								})
							},
							function(data) { //访问失败
								that.$message.success(data.msg);
							});
					}
				});
			},
		}
	}
</script>
<style scoped>
	.editor-btn {
		margin-top: 20px;
	}
</style>
